<template>
    <div>
        <!-- 校验框 -->
        <div class="sousuo">
            <el-form :model="form" label-width="80px" :inline="true">
                <el-row>
                    <el-col :span="8">
                        <el-form-item>
                            <el-select clearable v-model="form.categoryId" placeholder="请选择城市">
                                <el-option v-for="item in categories" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input clearable v-model="form.title" placeholder="请输入餐厅关键字"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 表格 -->
        <div class="table">
            <el-table :data="articleData" style="width: 100%;height: 700px;">
                <!-- 序号 -->
                <el-table-column type="index" :index="1" label="序号" width="60">
                </el-table-column>
                <!-- 餐厅封面 -->
                <el-table-column label="餐厅名称" width="140">
                    <template slot-scope="scope">
                        <div>{{ scope.row.title }}</div>
                    </template>
                </el-table-column>
                <!-- 餐厅介绍 -->
                <el-table-column label="省份" width="1200">
                    <template slot-scope="scope">
                        <div>{{ scope.row.category.name }}</div>

                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-link  type="primary" :underline="false" @click="toJump(scope.row)">评论管理</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页按钮 -->
        <div class="page">
            <!-- {{params.pageSize}} -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page"
                :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { get, post } from '@/utils/request'
export default {
    data() {
        return {
            // 表单对象
            form: {},
            //城市
            categories: [],
            // 所有的餐厅
            articleData: [],
            // 餐厅所对应的城市
            category: {},
            //餐厅信息
            params: {
                page: 1,
                pageSize: 10
            },
            //餐厅数量
            total: 0,
        }
    },
    watch: {
        form: {
            handler() {
                // 确保获取的栏目(文章分类)是最新的
                this.getCategory()
                this.params.page = 1;
                //只要条件发生改变就发起一个查询请求
                this.getArticle()
            },
            deep: true
        }

    },
    methods: {
        // 下拉框城市列表
        async getCategory() {
            let res = await get('/category/findAll');
            console.log(res, '获取分类');
            this.categories = res.data
        },
        //分页多条件查询餐厅信息
        async getArticle() {
            //分页  page  pageSize 多条件  title status  categoryId
            let temp = {
                ...this.params,
                ...this.form
                //...把属性全部打开
            }
            // console.log(temp,'temp')
            //判断条件是否存在  不存在删除条件
            for (let key in temp) {
                if (!temp[key]) {
                    delete temp[key]
                }
            }
            let res = await get('/article/pageQuery', temp);
            this.articleData = res.data.list;
            this.total = res.data.total;
            this.category = res.data.list.category;

        },
        // 当前页码条数发生改变触发
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.params.pageSize = val;
            this.params.page = 1;
            this.getArticle()
        },
        //当前页码发生改变触发
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.params.page = val;
            this.getArticle()
        },
        // 跳转到每一个餐厅的评论界面
        toJump(row) {
            this.$router.push({
                path: '/info/cmanage',
                query: {title:row.title,name:row.category.name,id:row.id},
            })
            console.log(row, '????')
        }

    },
    created() {
        this.getCategory()
        this.getArticle()

    }
}
</script>